<template>
    <div id="centreLeft1">
        <!--     <span class="text">  </span>-->
        <p class="text">{{dateYear}}</p>
        <p class="text">{{dateWeek}}</p>
        <p class="text">{{dateDay}}</p>
    </div>
</template>

<script>


    import {formatTime} from "../utils/index";

    export default {
        data() {
            return {
                loading: true,
                dateDay: null,
                dateYear: null,
                dateWeek: null,
                weekday: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
            };
        },
        components: {},
        created() {

        },
        mounted() {
            this.timeFn();
            this.cancelLoading();
        },
        methods: {
            timeFn() {
                setInterval(() => {
                    this.dateDay = formatTime(new Date(), 'HH: mm: ss');
                    this.dateYear = formatTime(new Date(), 'yyyy-MM-dd');
                    this.dateWeek = this.weekday[new Date().getDay()];
                }, 1000)
            },
            cancelLoading() {
                setTimeout(() => {
                    this.loading = false;
                }, 500);
            }
        }

    };
</script>

<style lang="scss" scoped>
  #centreLeft1 {
    margin-top: 50px;
    padding: 5px;
    height: 240px;
    .text {
      width: 100%;
      text-align: center;
      margin-top: 2px;
      font-size: 40px;
      /*height: 10px;*/
      color: #FFFFFF;
    }

  }
</style>
